<template>
  <view class="sign-layout">
    <my-header background-color="transparent"></my-header>

    <my-content class="content">
      <view class="sign_box">
        <view class="sign_content">
          <view class="sign_left">
            <view :class="item.is_sign ? 'active' : ''" class="sign_item" v-for="(item,index) in signData_1" :key="item.id">
              <view class="sign_index">第{{index+1}}天</view>
              <image mode="heightFix" class="sign_icon" :src="item.image"></image>
              <view class="sign_title">{{item.text}}</view>
              <view class="sign_num">{{item.num}}</view>

              <image v-if="item.is_sign" class="sign-done" src="/static/images/user/ic-done.png"></image>
            </view>

<!--            <view class="sign_item"></view>-->
          </view>
<!--          <view class="sign_right" :class="signData_2[0].is_sign ? 'active' : ''">
            <view class="sign_index">06</view>
            <image mode="heightFix" class="sign_icon" :src="signData_2[0].image"></image>
            <view class="sign_title">{{signData_2[0].text}}</view>
            <view class="sign_num">{{signData_2[0].num}}</view>
          </view>-->
        </view>
<!--        <image v-if="is_sign" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64ef6166c2a6f.png" class="sign_btn"></image>
        <image @click="sign()" v-else mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eefa2bde390.png" class="sign_btn"></image>-->
      </view>
      <view @click="sign" class="sign-btn" :style="{filter: is_sign ? 'grayscale(1)' : ''}">{{ is_sign ? '今日已签到' : '立即签到' }}</view>
      <text v-html="sign_rule" class="sign_rule"></text>
    </my-content>

  </view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				signData_1:[],
				signData_2:[{
					image:''
				}],
				is_sign:false,
				sign_rule:''
			}
		},
		onLoad(option) {

		},
		onShow(){
			this.getData()
		},

		methods: {
			back(){
				uni.navigateBack()
			},
			getData(){
				uni.showLoading({
					title:'数据加载中'
				})
				api.signPanels.index().then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						let signData = res.data.sign_panel;
            this.signData_1 = signData

						/*this.signData_1 = signData.filter(item => {
							return item.day < 7;
						});
						this.signData_2 = signData.filter(item => {
							return item.day == 7;
						});*/

						this.is_sign = res.data.is_sign
						this.sign_rule = res.data.rule

						console.log(res.data)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			sign(){
				this.is_sign = true;
				api.userSigns.store().then(res => {
					if (res.code === 200) {
						this.show(res.msg)
						this.getData()
					}
				}).catch(error => {
					console.log(error)
				})
			},
		},
	}
</script>

<style lang="scss">
.sign-layout {
  height: 100%;
  min-height:100vh;
  width: 100%;
  background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign.png");
  background-size: 100% 100%;
}
	.content {
		height: 100%;
		min-height:100vh;
		width: 100%;
    background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign.png");
    background-size: 100% 100%;
		.bg {
			height: 100vh;
			width: 100%;
			position: absolute;
			top:0;
			left: 0;
			z-index:-1;
		}
		.back {
			position: fixed;
			left: 20rpx;
			top:80rpx;
			z-index:1;
			width: 65rpx;
			height: 65rpx;
		}
		.header_title {
			position: fixed;
			left: 300rpx;
			top:100rpx;
			z-index:1;
			color: #fff;
		}
		.sign_box {
			width: 680rpx;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			/*position: absolute;
			top: 350rpx;
			left: 10rpx;*/
      margin: 250rpx auto 0;
      padding: 100rpx 25rpx 25rpx;
      background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign-box.png");
      background-size: 100% 100%;
			.sign_content {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.sign_left {
					/*width: 460rpx;*/
					/*height: 360rpx;*/
					display: flex;
					flex-wrap: wrap;
					margin-left: 10rpx;
          width: 100%;
					/*justify-content: space-between;*/
					.sign_item {
						border-radius: 10rpx;
						/*background: linear-gradient(to bottom, #FFCB6D, #F86F55);*/
            background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign-item.png");
            background-size: 100% 100%;
						position: relative;
						height:200rpx;
						/*width: 140rpx;*/
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
            width: calc(100% / 4 - 10rpx);
            box-sizing: border-box;
						 margin-right: 10rpx;
            margin-bottom: 40rpx;

            &:last-child {
              width: calc(50% - 10rpx);
              margin-right: 0;
              background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign-item2.png");
            }

						&:nth-child(4) {
							margin-right: 0;
						}
						&:nth-child(6) {
							/*margin-right: 0;*/
						}

						&.active {
							opacity: 0.5;
						}
						.sign_index {
							position: absolute;
							color: #DED000;
							left: 50%;
              transform: translateX(-50%);
							top:-25rpx;
							font-size: 30rpx;
						}
						.sign_icon {
							height: 76rpx;
							margin-top: 10rpx;
						}
						.sign_title {
							margin: 10rpx 0;
              background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-sign-mask.png");
              background-size: 100% 100%;
              padding: 0 20rpx;
						}
						.sign_num {
              /*margin-bottom: 10rpx;*/
						}

            .sign-done {
              width: 60rpx;
              height: 60rpx;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }

					}
				}
				.sign_right {
					width: 180rpx;
					height: 350rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					background: linear-gradient(to bottom, #FFCB6D, #F86F55);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 24rpx;
					position: relative;
					.sign_index {
						position: absolute;
						color: #fff;
						left: 10rpx;
						top:10rpx;
						font-size: 30rpx;
					}
					.sign_icon {
						height: 60rpx;
						margin-top: 30rpx;
					}
					.sign_title {
						margin: 10rpx 0;
					}
					.sign_num {

					}
				}
			}

			.sign_btn {
				margin:20rpx auto;
				width: 480rpx;
			}
		}

		.sign_rule {
			width: 700rpx;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			/*position: absolute;
			top: 1000rpx;
			left: 25rpx;*/
      color: #808080;
      box-sizing: border-box;
      padding: 20rpx;
			font-size: 24rpx;
		}

    .sign-btn {
      margin: 20rpx auto 0;
      width: 610rpx;
      height: 84rpx;
      text-align: center;
      line-height: 84rpx;
      color: white;
      font-weight: bold;
      background-image: url("https://www.dingxians.cn/upload/user_static/common/btn-primary.png");
      background-size: 100% 100%;
    }
	}
</style>